<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>SB Admin 2 - Dashboard</title>

  <!-- Custom fonts for this template-->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

  <!-- Custom styles for this template-->
  <link href="css/sb-admin-2.min.css" rel="stylesheet">
  <style>
    #wrapper #content-wrapper {
        overflow-x: visible;
    }
    #loginbtn{
      display: none;
    }
  </style>
</head>

<body id="page-top">

  <!-- Page Wrapper -->
  <div id="wrapper">



    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

      <!-- Main Content -->
      <div id="content">

        <!-- Topbar -->
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

          <!-- Sidebar Toggle (Topbar) -->
          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
            <i class="fa fa-bars"></i>
          </button>

          <!-- Topbar Navbar 头部导航栏 -->
          <ul class="navbar-nav ml-auto">

            <div class="topbar-divider d-none d-sm-block"></div>

            <!-- Nav Item - User Information 用户信息 -->
            <li class="nav-item dropdown no-arrow">
              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <!-- 用户名 -->
                <span id="username" class="mr-2 d-none small d-lg-inline text-gray-600 ">四秋的夜猫子</span>
                <!-- 登陆按钮 -->
                <span id="loginbtn" class="mr-2 d-none">登录</span>
              </a>
              <!-- Dropdown - User Information  下拉菜单 登出按钮-->
              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"  id="userDropdownOptions" aria-labelledby="userDropdown">
                <a class="dropdown-item" 
                id="logout"
                href="#" data-toggle="modal" data-target="#logoutModal">
                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                  登出
                </a>
              </div>
            </li>
          </ul>

        </nav>
        <!-- End of Topbar -->

      </div>
      <!-- End of Main Content -->


    </div>
    <!-- End of Content Wrapper -->

  </div>
  <!-- End of Page Wrapper -->



<script src="./js/utils.js"></script>
<!-- <script>
  // 1. 点击用户名弹出操作框;
  // 绑定点击用户名操作
  $("#username").onclick = function(evt){
    // 防止浏览器版本不同的兼容性问题
     var e = evt || event;
    //  设置用户登出弹窗的显示
     $("#userDropdownOptions").style.display = "block";
    //  阻止浏览器？默认行为
     e.stopPropagation();
  }
  // 2. 点击登出的时候隐藏用户名，显示登陆;
  // 绑定登出按钮
  $("#logout").onclick = function(){
         // 隐藏用户名
      $("#username").className = "d-none";
         // 显示登录按钮
      $("#loginbtn").className += " d-lg-inline";
  }
  // 3. 点击空白处隐藏登陆按钮;
  // 绑定浏览器空白区域
  document.onclick = function(){
    // 设置登出弹窗的的隐藏属性
    $("#userDropdownOptions").style.display = "none";
  }
  // 4. 点击跳转到登录页;
  // 绑定登录按钮点击事件
  $("#loginbtn").onclick = function(){
    // 跳转到./login.html页面
     location.href = "./login.html";
  }
 // 判定是否存在cookie ，如果存在取出放到用户名位置;
//  
  window.onload = function(){
    var cookie = getCookie("email");
    if(cookie){
      $("#username").innerHTML = cookie;
    } 
  } -->
  <script>
    // 1. 点击用户名弹出操作框;
    // 绑定点击用户名操作 #username
    $("#username").onclick = function(e){
      // 防止浏览器版本不同的兼容性问题
      // var e = evt || event;
      //  设置用户登出弹窗的显示 #userDropdownOptions
      $("#userDropdownOptions").style.display = 'block';
      //  阻止浏览器？默认行为
      e.stopPropagation();
   }
    // 2. 点击登出的时候隐藏用户名，显示登陆;
    // 绑定登出按钮 #logout
    $("#logout").onclick = function(){
           // 隐藏用户名
           $("#username").className = 'd-none';
           // 显示登录按钮 #loginbtn
           $("#loginbtn").className += ' d-lg-inline';  //?
    }
    // 3. 点击空白处隐藏登陆按钮;
    // 绑定浏览器空白区域
    document.onclick = function(){
      // 设置登出弹窗的的隐藏属性
      $("#userDropdownOptions").style.display = 'none';
    }
    // 4. 点击跳转到登录页;
    // 绑定登录按钮点击事件
    $("#loginbtn").onclick = function(){
      // 跳转到./login.html页面
      location.href = './login.html';
    }
   // 判定是否存在cookie ，如果存在取出放到用户名位置;
  //  
    window.onload = function(){
      var cookie = getCookie("email");
      if(cookie){
        $("#username").innerHTML = cookie;
      } 
    }
</script>

</body>

</html>
